<template>
  <div>
    <el-form ref="splitForm" :inline="true" :model="form">
      <el-form-item label="商品名称：" prop="goods_name">
        <el-input v-model="form.goods_name" placeholder="请输入商品名称" class="wid220"></el-input>
      </el-form-item>
       <MainFormBtn @reset="reset" @getSearchFor="getData" :loading="loading" :showBtn="false" />
    </el-form>
    <MainTable
      ref="orderTable"
      :loading="loading"
      :columns="orderGoodsSpliutColumns"
      :tableData="list"
      :height="400"
      :enableHeaderDrag="false"
      @selection-change="handleSelectionChange">
      <template #customLeft>
        <el-table-column type="selection" align="center"/>
      </template>
    </MainTable>
    <div class="boxdq mg-t-10">
      <div></div>
      <MainPagination
        background
        :total="totalCount"
        :page-size="current.size"
        :current-page="current.page"
        @size-change="changeSize"
        @current-change="changePage"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import { packApi } from "@/utils/public";
import { orderGoodsSpliutColumns } from "../../mockData.js";
import { getOrderSplitList, splitByGoods } from "@/api/order/orderList";
export default {
  inject: ['getOrderList'],
  props: {
    orderId: {
      type: [String,Number],
      default: "",
    },
  },
  data() {
    return {
      orderGoodsSpliutColumns, 
      loading: false, 
      form: {
        goods_name: ""
      },
      list: [], // 列表
      current: { // 分页
        page: 1,
        size: 20,
      },
      totalCount: 1, // 总数
      selectArr: [], // 选中id数组
    }
  },
  methods: {
    getData() {
      this.loading = true;
      let data = {
        order_id: this.orderId,
        ...this.current,
        ...this.form,
      };
      getOrderSplitList(packApi(data)).then(res=> {
        this.loading = false;
        if(res.errcode == 0) {
          this.list = res.data.list;
          this.totalCount = res.data.count;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 拆分订单
    split() {
      if(!this.selectArr.length) return this.$message.error("请选择拆分商品");
      let data = {
        id: this.orderId,
        order_list_ids: this.selectArr.join(",")
      };
      splitByGoods(packApi(data)).then(res=> {
        if(res.errcode == 0) {
          if(this.getOrderList) this.getOrderList();
          this.$message.success("拆分成功");
          this.$emit("close");
        } else {
          this.$message.error(res.errmsg);
        }
      })
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = val.map(item=> item.id);
    },
    // 重置
    reset() {
      this.$refs.splitForm.resetFields();
      this.getData();
    },
    // 重置data数据
    resetData() {
      this.$refs.splitForm.resetFields();
      this.list = [];
      this.current = {
        page: 1,
        size: 20
      }
      this.totalCount = 1;
      this.selectArr = [];
    },
    // 分页
    changeSize(pageSize) {
      this.current.size = pageSize;
      this.getData();
    },
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-checkbox {
  margin-bottom: 0 !important;
}
</style>